<template>
  <div>
    <el-form
      ref="noticeForm"
      :model="noticeForm"
      :rules="noticeRules"
      label-width="120px"
    >
      <el-row :gutter="15">
        <el-col :span="12">
          <el-form-item label="进修开始时间" prop="startDate">
            <el-date-picker
              v-model="noticeForm.startDate"
              style="width: 100%"
              type="date"
              placeholder="请选择进修开始时间"
              value-format="yyyy/MM/dd"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="进修结束时间" prop="endDate">
            <el-date-picker
              v-model="noticeForm.endDate"
              style="width: 100%"
              type="date"
              placeholder="请选择进修结束时间"
              value-format="yyyy/MM/dd"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="报到日期" prop="registerDate">
            <el-date-picker
              v-model="noticeForm.registerDate"
              style="width: 100%"
              type="date"
              placeholder="请选择报到日期"
              value-format="yyyy/MM/dd"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="报到时间" prop="registerTime">
            <el-time-select
              v-if="noticeForm.registerTimeStart"
              placeholder="开始时间"
              v-model="noticeForm.registerTimeStart"
              :picker-options="{ start: '08:00', step: '00:30', end: '18:30' }"
              @change="registerTimeChange"
              style="width: 140px"
            >
            </el-time-select>
            -
            <el-time-select
              v-if="noticeForm.registerTimeEnd"
              placeholder="结束时间"
              v-model="noticeForm.registerTimeEnd"
              :picker-options="{
                start: '08:00',
                step: '00:30',
                end: '18:30',
                minTime: noticeForm.registerTimeStart,
              }"
              @change="registerTimeChange"
              style="width: 140px"
            >
            </el-time-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="报到地点" prop="registerAddress">
            <el-input
              v-model="noticeForm.registerAddress"
              placeholder="请输入报到地点"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="进修费(元)" prop="engageMoney">
            <el-input
              type="number"
              v-model.number="noticeForm.engageMoney"
              placeholder="请输入进修费(元)"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="实验材料费(元)" prop="materialMoney">
            <el-input
              type="number"
              v-model.number="noticeForm.materialMoney"
              placeholder="请输入实验材料费(元)"
            />
          </el-form-item>
        </el-col>
        <!-- <el-col :span="12">
          <el-form-item label="开户行" prop="bankName">
            <el-input v-model="noticeForm.bankName" placeholder="请输入开户行" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="银行卡号" prop="bankCardNumber">
            <el-input v-model="noticeForm.bankCardNumber" placeholder="请输入银行卡号" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="财务账号" prop="financialAccount">
            <el-input v-model="noticeForm.financialAccount" placeholder="请输入财务账号" />
          </el-form-item>
        </el-col> -->
        <el-col :span="12">
          <el-form-item label="联系人" prop="contactMan">
            <el-input
              v-model="noticeForm.contactMan"
              placeholder="请输入联系人"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="联系电话" prop="contactPhone">
            <el-input
              v-model="noticeForm.contactPhone"
              placeholder="请输入联系电话"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="传真" prop="fax">
            <el-input v-model="noticeForm.fax" placeholder="请输入传真" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="备注" prop="remark">
            <el-input v-model="noticeForm.remark" placeholder="请输入备注" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="通知书内容" prop="noticeContent">
            <editor v-model="noticeForm.noticeContent" :min-height="400" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="" prop="noticeContent">
            <el-button type="primary" @click="bookPreviewShow = true"
              >预览内容</el-button
            >
            <!-- <el-button type="primary" @click="noticeFormSubmit"
              >保 存</el-button
            > -->
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <el-dialog
      title="预览通知书"
      :visible.sync="bookPreviewShow"
      width="940px"
      append-to-body
      :close-on-click-modal="false"
    >
      <registerBookPreview
        :form-obj="form"
        v-if="bookPreviewShow"
      ></registerBookPreview>
      <div slot="footer" class="dialog-footer">
        <el-button @click="bookPreviewShow = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getRegisterInfo } from "@/api/business/registerInfo";
import { updateRegisterNotice } from "@/api/business/registerNotice";
import { parseTime } from "@/utils/ruoyi";
import registerBookPreview from "@/views/business/registerBase/audit/components/registerBookPreview.vue";

export default {
  components: { registerBookPreview },
  props: {
    registerId: null,
  },
  data() {
    return {
      form: {},
      noticeForm: {},
      noticeRules: {
        startDate: [
          { required: true, message: "报到日期不能为空", trigger: "blur" },
        ],
        endDate: [
          { required: true, message: "结业日期不能为空", trigger: "blur" },
        ],
        registerTime: [
          {
            required: true,
            message: "请选择报到开始时间、结束时间",
            trigger: "blur",
          },
        ],
        registerAddress: [
          { required: true, message: "报到地点不能为空", trigger: "blur" },
        ],
        engageMoney: [
          { required: true, message: "进修费(元)不能为空", trigger: "blur" },
        ],
        materialMoney: [
          {
            required: true,
            message: "实验材料费(元)不能为空",
            trigger: "blur",
          },
        ],
        bankName: [
          { required: true, message: "开户行不能为空", trigger: "blur" },
        ],
        bankCardNumber: [
          { required: true, message: "银行卡号不能为空", trigger: "blur" },
        ],
        financialAccount: [
          { required: true, message: "财务账号不能为空", trigger: "blur" },
        ],
        contactMan: [
          { required: true, message: "联系人不能为空", trigger: "blur" },
        ],
        contactPhone: [
          { required: true, message: "联系电话不能为空", trigger: "blur" },
        ],
        fax: [{ required: true, message: "传真不能为空", trigger: "blur" }],
        remark: [{ required: true, message: "备注不能为空", trigger: "blur" }],
      },
      // 批量通知-通知书预览
      bookPreviewShow: false,
      bookPreviewForm: {},
    };
  },
  watch: {
    registerId: {
      immediate: true,
      handler() {
        this.getInfo();
      },
    },
  },
  methods: {
    parseTime,
    registerTimeChange() {
      if (
        this.noticeForm.registerTimeStart &&
        this.noticeForm.registerTimeEnd
      ) {
        this.noticeForm.registerTime =
          this.noticeForm.registerTimeStart +
          "-" +
          this.noticeForm.registerTimeEnd;
      }
    },
    getInfo() {
      getRegisterInfo(this.registerId).then((response) => {
        this.form = response.data;
        this.noticeForm = this.form.registerNoticeVo;
        if (this.noticeForm) {
          let split = this.noticeForm.registerTime.split("-");
          this.$set(this.noticeForm, "registerTimeStart", split[0]);
          this.$set(this.noticeForm, "registerTimeEnd", split[1]);
        }
      });
    },
    noticeFormSubmit() {
      this.$refs["noticeForm"].validate((valid) => {
        if (valid) {
          updateRegisterNotice(this.noticeForm).then((response) => {
            this.$modal.msgSuccess("保存成功");
            this.initData();
            this.noticeShow = false;
          });
        } else {
          this.$modal.msgError("请完善表单内容");
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.enter-container {
  font-family: "Microsoft YaHei";
  font-size: 18px;
  padding: 0 15px;
  line-height: 30px;

  .btn-box {
    display: flex;
    justify-content: flex-end;
  }

  .title {
    text-align: center;
    font-size: 26px;
    font-weight: bolder;
    letter-spacing: 0.5em;
  }

  .indent {
    text-indent: 2em;
  }

  .bolder {
    font-weight: bolder;
  }

  .underline {
    text-decoration: underline;
  }

  .title2 {
    margin: 15px 0;
    text-align: center;
    font-size: 26px;
    font-weight: bolder;
  }

  .sign {
    margin-top: 40px;
    text-align: right;
    font-weight: bolder;
    position: relative;

    .img {
      position: absolute;
      top: -60px;
      right: 20px;
      width: 130px;
      height: 130px;
    }
  }

  .tips {
    margin-top: 50px;
    text-align: center;
    font-weight: bolder;
    color: #a52529;
  }
}
</style>
